═══ 1. Smalled HTML Extensions ═══
SMEHTM 1.00
The Smalled HTML Extensions are written as extensions for the Smalled editor.
However, SMEHTM can be used with any other MLE based editor, such as the OS/2
system editor or Zed. The Extensions act as a floating toolbar in the form of a
notebook. Also included in this package is an HTML example page that shows some
useful samples of HTML tags.
o Disclaimer Registering/Shareware
o Using SMEHTM
o The Pages
o What's New/History
o Future Attractions
o About the Author
o Smalled
o Thanks
═══ 1.1. Using the Smalled HTML Extensions ═══
When you start using SMEHTM, the first thing you should do is give the main
window the dimensions and place you prefer on the screen. These will be
remembered. (The SMEHTM controls may have different sizes for different screen
resolutions.)
The next thing to do is to decide which editor you will use. SMEHTM was built
with Smalled in mind, but it will function with any MLE based editor, such as
the system editor (E.EXE). The first time SMEHTM is started, it will
automatically start the system editor. It's fairly certain that everyone has
this editor. If another editor is preferred, use the Config page to tell the
Smalled HTML Extensions to use that editor. (SMEHTM can be started from within
Smalled v1.4 or higher. In that case this setting doesn't have any meaning.)
Every time a button in SMEHTM is pressed a tag will be entered in the editor,
and the focus is then returned to the editor. All the HTML tags supported by
SMEHTM are explained in the sections about the SMEHTM pages.
Most of the time an HTML tag consists of two pieces, between which is text that
will be formatted. For example,
formatted text
. You can press the
Heading 1 key on the SMEHTM Font page and these tags will be entered in the
text as with the cursor between them. You can then start typing right
away. This method is mostly used for writing an HTML page from scratch.
Another method for entering HTML tags is to select the text you want to format
and then hit the appropriate button in SMEHTM. The tags will be placed around
the selected text and the selected text will stay intact. This method is used
when adding tags to already existing text.
The exception to this rule is the Char page which can be used to add accents to
letters. If this is desired, you must select exactly one letter and hit the
accent button of choice. If more than one character is selected or nothing is
selected, nothing will happen.
Many of the pages in SMEHTM contain controls other than buttons. These controls
are always grouped together with at least one button. If these controls (most
of them are spinbuttons) don't contain a value or show the value 0, nothing
will be inserted in their place in the tag. Many tags can have different forms.
The
tag, for example, has many possible combinations. Here are some of
them:
Example
By using the extra controls described above, any of these combinations can be
made very quickly.
SMEHTM supports fast keys to access the several pages and controls. This is
described in the section Moving around. Most things should be pretty intuitive,
but it wouldn't hurt to read this section.
═══ 1.1.1. Moving Around ═══
All the controls in SMEHTM support shortcuts. Take a look at the buttons and
tags and you will see some of the letters are underlined. This means these
controls can be activated with the push of just one button. You can jump from
page to page by typing just the first letter of the tag. The same goes for the
buttons. They can be accessed with the ALT key in combination with the
underlined letter on the button.
There is one snag though. These keys only act on the active window. With a
notebook there are always two possibilities.
o The notebook window is active. If this is the case, an emphasis rectangle is
drawn in the current active tab and you can move to other pages just by
pressing the first letter of the tab or by using the left/right arrows. If
this window isn't active (emphasis rectangle isn't showing), just click on
the status line to activate it. The status line is the area next to the two
arrow pushbuttons.
o The dialog in one of the notebook pages is active. You can tell if this is
the case by looking at the controls in the dialog. One of these controls
should have the focus. Another way of detecting this is to look at the
notebook control. When this doesn't have the focus, the dialog probably will.
(Of course the frame needs to be selected.) When this is the case, buttons
can be activated with the ALT-letter combination. If this is done, the
function associated with the button will be executed.
Another way of moving between controls is the tab key. If this key is pressed,
the next control will be made active. Pressing Return will activate the current
control.
═══ 1.2. The Smalled HTML Extensions Pages ═══
All controls in SMEHTM are ordered in a notebook. Every page in this notebook
handles a different aspect of the HTML tagging language. (This means the number
of pages will certainly grow in the future.) In the help description of each
page, a short explanation of the HTML code which is handled by that page
appears. Also in the SMEHTM package is an example HTML page which contains a
number of samples.
o Main
o Font
o Page
o Char
o List
o Link
o Table
o Image
o Templates
o Tools
o Config
o Register
═══ 1.2.1. Page 1 (Main) ═══
The Main page is used to set up the mandatory items for a basic HTML document.
By pressing the Basic button on this page, the mandatory HTML tags are added to
the text editor window. It doesn't matter how much text already exists in the
editor, this command will add the necessary codes at the top and bottom of the
text.
If the two entry fields on the Main page are not filled, the Smalled HTML
Extensions will add the mandatory codes in their simplest form. In this case,
the following will be added:
Basic code
The first two lines in this sample are Comment lines. They are added to
identify the document. Some browsers like to see the first line. The second
line is added to show that the document was created with the Smalled HTML
Extensions.
The next statement is the first real HTML statement, . The tag
defines that the document is an HTML page. Note that the document is closed at
the end with , nothing beyond will show up in your document.
The element contains information about the document. The
combination must be between the and the tags. In most cases it
will only contain the tag.
With the tag, a line can be entered that describes the document. This
title will appear in the titlebar of the browser you're using when viewing an
HTML document. This text can be entered in the Title text field on the Main
page. SMEHTM will automatically enter this text between the and
tags.
In most HTML pages, a background image is used. To accomplish this, the
tag has to be modified. This tag uses a BACKGROUND= statement to accomplish
this. Behind this statement the name of an image file (GIF, JPG...) must be
entered between quotes. If the name of an image file is entered in the
Background image field, SMEHTM will change the statement appropriately
when the basic code is entered.
═══ 1.2.2. Page 2 (Font) ═══
An HTML document doesn't have the capability to handle text that a word
processor has. It can only display one font at a time, but it can do a lot with
that one font. In the Font page most of the possibilities are available (not
all though: things like color, etc. aren't yet supported by SMEHTM).
The page is divided into logical groups. Some tags listed in this page will
have the same effect. This will depend on the browser you are using.
The tags in the Heading section display the six Heading style possibilities.
The heading dictates the size of the text formatted with it. Heading tags look
like:
The Font Style section gives access to tags that will format the font style of
your text. The most commonly used are Italic, Bold and Underline. The following
tags are supported by SMEHTM (note that some of these tags might not be
supported by all browsers):
o I Italic
o B Bold
o U Underline
o S Strikeout
o BL Blink
o TT TeleType (code sample)
The Font section gives the opportunity to set the size of the font that will
be displayed. In HTML, it is possible to work with a base font size and define
derivatives from that size. The philosophy of SMEHTM is to use the default font
size and customize it when needed with the heading tag, or to set the font size
by using the size button.
HTML defines several ways to include code Samples and quotations. SMEHTM
supports four of these tags.
o Code Sample - This is used to display a code sample in a fixed-width font.
This usually has the same effect as TT.
o Block Quote - This produces a text quote usually right and left indented.
o Citation - Also used to display citations or quotes but gives the text inline
in Italics.
o Sample - Is also used to show a code sample and has the same effect as Code
in most browsers.
HTML has the ability to give certain lines of text an Emphasis. In most cases
Normal emphasis has the same effect as Italic and Strong emphasis has the same
effect as Bold.
Sub/Super-script tags are also possible. However, not all browsers support
them.
═══ 1.2.3. Page 3 (Page) ═══
The Page page contains a number of items that are useful in doing layout work.
Besides that, it contains the Comment tag (I didn't know where else to put it).
This page is divided in two sections.
The Layout section contains the following tags:
o Center - This button will insert the tags. All text, links,
tables, images, etc. that are between these tags will be displayed centered
on the screen or in the current indent.
o Line Break - This forces a 'Hard return' in the text.
o Paragraph - The tags are used to format text into paragraphs. Between
two paragraphs there will be a blank line.
The Horizontal line section will create a
tag. This tag creates a line on
the web page which by default will span the page within the current indents.
There are several ways this line can be modified. For this, the other controls
in this section can be used. If there aren't any values filled in, SMEHTM will
generate a plain
tag. Depending on the settings in the other controls,
this tag will be modified as follows:
o Noshade - The Noshade option turns off the bevelling effect added in some
browsers.
o Align - Justifies the line to the left, right or center (default).
o Size - Sets the thickness of the line.
o Width - Sets the line length in pixels or as a percentage of the page width
(within the current indents).
The Comment tag is somewhat special. It doesn't have anything to do with page
layout whatsoever. It simply allows you to add comment statements to your HTML
text that won't show up in the web page when viewed on a WWW browser. This
statement can be used for personal documentation.
═══ 1.2.4. Page 4 (Char) ═══
Computers can write characters with accents, and a number of sign characters.
However, because of codepages, these characters can be located in very
different places within the extended ASCII table. HTML has a solution for this;
these characters are replaced by an HTML tag.
The first section of this page, Accenting , takes care of various accents on
characters. To place an accent on a character simply select it (select exactly
one character) and press the button with the desired accent. If that accent is
supported for the selected character, this character will be replaced with the
HTML equivalent. If the accent isn't supported for that character, nothing
happens.
Some characters, like the > and < characters, are reserved because they are
part of the HTML tagging language. If you want to use these characters in your
document, use the corresponding buttons in the Reserved area.
In the Characters area a number of character and symbols, such as the copyright
symbol, can be selected. Pressing one of these buttons will cause the HTML tag
for that symbol to be inserted in the text.
═══ 1.2.5. Page 5 (List) ═══
A powerful feature of HTML is the ability to use lists in a number of ways.
This is a very commonly used feature on the WWW. Almost every web page that has
a list of links to favorite pages uses this statement. In the example HTML page
provided with SMEHTM a number of list samples can be found.
One of the most attractive features of these lists is that they can be nested.
Note: not all browsers support all the possibilities that HTML offers.
HTML supports three different types of lists.
o Ordered lists
o Unordered lists
o Definition lists
Ordered lists display a list with numbered items. By default the list is
numbered with normal (Arabic) numbers. If you want to use another type, select
it in the Type spinbutton. The following types are supported:
o 1, 2, 3 (default)
o A, B, C
o a, b, c
o I, II, III
o i, ii, iii
For every ordered list a starting number can be defined. By default a list will
start at 1 (or A, a, I or i). By using the Start spinbutton, you can change
this value. If, for example, a 5 is added, the list will start numbering the
elements with 5. If this spinbutton is set to 0, the Start option will be
ignored.
Unordered lists are lists in which every element has a bullet. Every time a new
nested list (a list which is an item in another list) is created, the bullet
will change. It is also possible to select the type of bullet for any list with
the Type spinbutton.
o disc
o circle
o square
If this spinbutton is left blank the default type will be used. Note that not
all browsers support all three bullet types.
Definition lists are a special type of list used to combine a term and a
definition. These form coupled pairs in which the term is displayed on one line
and the definition is indented on the next line(s). For an example of
Definition lists see the HTML file included in this package.
═══ 1.2.6. Page 6 (Link) ═══
Links... Well, these are what a Hypertext document is all about. With links,
you're able to jump to other places on the Web or within your document, display
pictures, start an e-mail session, retrieve a file, etc. HTML supports many
different types of links. The most important (and most used) are supported by
SMEHTM.
Looking more precisely at links, we see that what is defined is the beginning
or end of a link. In most cases it will be the beginning. In such a link
(anchor) we define a URL (Unique Resource Locator) and the access method for
that URL. The URL for a given access method can be typed in the entryfield
beside the desired access method. Clicking on the appropriate button causes the
link to be inserted. After this, we simply type the text that will be
highlighted as a link in the web page. SMEHTM supports the following access
methods:
o http:// - This link will give a connection to another web page. The URL
expected is another page on the web (for example,
http://www.wilmington.net/bmtmicro/).
o ftp:// - This will give a connection to an FTP site (for example,
ftp://hobbes.nmsu.edu). You can also add a direct download link to an FTP
site (for example, ftp://hobbes.nmsu.edu/os2/editors/smaled13.zip).
o mailto: - This is a very nice feature. When this link is added to a page, the
WWW browser will display a form from which a user can send an e-mail message
to the given address.
o file: - This link isn't used very much. It creates a link to a local file
(one on the hard drive of the user).
o HTML ref - This button exists because HTML supports a number of access
methods that aren't available in SMEHTM. A plain tag is added to
which the user can add access methods like news, gopher, wais, etc.
Besides these links, HTML also allows the possibility to provide NAME labels. A
NAME label is a point in your text marked with a certain name. You can add a
link anywhere that will take you directly to this label (a jump if you like). A
label is added with the NAME button. A reference to this label is added with
the # button. The example HTML page in this package shows a number of label
possibilities.
The Link page also has another convenient feature. For every type of link there
is a four store memory available. The contents of each listbox can be accessed
by pressing the little button on the right of the entryfield or by using the
up/down cursor keys.
Every listbox can store four memory items. These can be filled by typing in the
link name and hitting the Enter key on the keyboard. An audio signal will
notify you that a new item is stored in memory. If a new item is added and the
store already contains four items, the top-most item is discarded.
The stored items will be remembered by SMEHTM between sessions.
═══ 1.2.7. Page 7 (Table) ═══
A powerful but underestimated feature of HTML is the capability to build
attractive tables. A nice example how tables can be built is Gary Hammer's Must
Have Utilities List. The Table page is the most crowded page in SMEHTM. This
gives an indication of what can be done with tables. This page has two main
sections, one for creating a table and one for adding table items.
With the table section, all kinds of tables can be set up. As within all SMEHTM
pages, if a spinbutton doesn't show any value or is filled with a 0, the
corresponding attributes won't be added to the tag. The tag can have
the following attributes:
o Border - Including this attribute will draw borders around all cells. The
border thickness can be specified in pixels.
o Spacing - The cell spacing gives the amount of space in pixels between
individual cells.
o Padding - This sets the space in pixels between the border of the cell and
the contents of the cell.
o Width - The width sets the desired width of the table. This can be in pixels
or in a percentage (% checkbox) of the page width.
The Caption button is a special case. With the caption tag you can add a title
to the table. Use the spinbutton to set the placement to top or bottom.
The Cell/Row section contains buttons for adding rows, cells and headers.
o Row - This is a mandatory element in a table. It tells the browser to start a
new row in the table. Every time a new row is desired, this tag should be
added. To modify the row element use the Align and Valign spinbuttons. These
tell the browser how to align (and vertically align) the text in the row.
o Data - This button will start a new cell. If data (text, graphics, etc.) is
to be added, this tag is mandatory. The cells can be tailored to suit
different needs; for this the following attributes are used :
- Width - Gives the width of the cell either in pixels or in percentage (use
the % checkbox) of the table.
- Colspan - Specifies how many columns a cell should span.
- Rowspan - Specifies how many rows a cell should span.
o Header - This button adds a table heading tag. This tells the browser to
start a heading cell. Such a cell is the same as a normal (data) cell, but
the contents are usually centered and bold.
o Clear - The clear button doesn't add an HTML tag. It is only added for
convenience and will clear the spinbuttons in the Cell/Row section.
When the Data, Header or Row buttons are used, SMEHTM takes only those
attributes from the page that are valid for the chosen button. The Header tag
may have all the attributes, the Row tag only the Valign and Align attributes
and the Data tag can only have those attributes not used by Row.
═══ 1.2.8. Page 8 (Image) ═══
Most web pages contain a wealth of images. (Don't overdo this though, it will
make loading the page relatively slow.) With the Image page, an image can be
added to an HTML page. Note that an image can also be used as a link or as part
of a table.
Images in HTML pages are usually .gif or .jpg files. In the entryfield beside
the Image button the name of such a file can be entered. This can be just a
file name or a complete URL for the image. With images, a large number of
attributes are possible.
o Alt - With the Alt attribute, alternate text can be added in case the browser
can not display the image. I strongly recommend including alternate text.
o Height/Width - These attributes can scale the image. If only one of them is
filled in, the other will be scaled accordingly. It's a very good idea to
specify these values. This allows browsers to format and display text before
images and so create the feel of a quicker loading time.
o Align - Will align the picture on the page.
o Hspace/Vspace - Will set the horizontal and vertical space around the image.
o Border - When an image is included in a link, the border indicating this can
be re-sized.
═══ 1.2.9. Page 9 (Templates) ═══
The Templates function of the Smalled HTML Extensions can be very useful.
SMEHTM allows 6 templates to be entered and remembered.
What is a template? Well, it's simply the name of a file somewhere on the
system that contains text that can be inserted at the current cursor position
in the editor. Certain constructions that are used very often can be placed in
such a file. This way they will only be one button click away.
═══ 1.2.10. Page 10 (Tools) ═══
The tools page doesn't contain any HTML tagging functions. It contains three
functions that can make editing an HTML document a lot easier. All three
functions only work with selected text, so if there isn't any text selected in
the editor, the buttons in this page won't function. Also the functions only
work with tags in the form <......>. This means tags like :Aacute; won't be
touched.
o Strip removes all the HTML tags from the currently selected text.
o Lower converts all the tags in the selected text to lower case.
o Upper converts all the tags in the selected text to Upper case.
═══ 1.2.11. Page 11 (Config) ═══
In future releases this page will be expanded. For now only some basic
settings can be entered.
Editor - This field will indicate which editor should be used by SMEHTM.
Preferably this will be Smalled. If Smalled v1.4 or higher is used, this field
doesn't have much value because SMEHTM can be started from within Smalled.
If nothing is entered here, SMEHTM will use the E.EXE editor. If you would like
to use another editor, fill in the entire path to that editor. Every editor
based on the MLE control should work.
Startup page - In this spinbutton the page that will be displayed when SMEHTM
is started can be set. The default for this setting is the About page.
Float on top - SMEHTM can remain on top of the editor after a button in SMEHTM
is pushed. Pressing a button will, in most cases, cause a tag to be inserted in
the editor. After this action the editor usually regains the focus. SMEHTM can
react in two possible ways.
o It can stay on top of the editor after a tag is inserted. If you want this
behavior, the Float on top button should be checked. If you want the editor
to be on top, just click on the menubar, the toolbar or activate a menu
option. If this is done, SMEHTM assumes you want the editor on top and will
go to the background.
o After the insertion of a tag, SMEHTM will always place the editor on top. If
you want this behavior, make sure the checkbutton is not flagged.
This floating behavior can be changed on the fly. If the state of the check
button is changed, the new behavior becomes active immediately. This setting is
remembered between sessions.
Use bitmaps in tabs - When first started, SMEHTM will display text in the tabs
that are used to select the various pages. It is also possible to use bitmaps
in the tabs. The advantage of doing this is that more tabs can be displayed in
less space. This makes more pages rapidly accessible. If you like bitmaps on
the tabs, flag this checkbutton.
For this option to become active, SMEHTM must be restarted.
Insert tags in lowercase - By default SMEHTM uses upper case characters to
insert HTML tags. However some people like them in lower case. If you prefer
tags inserted in lower case, flag this checkbutton.
There is one situation though, where this may be a disadvantage. If Templates
are being inserted, SMEHTM will try to convert the tags in the templates to
lower case. This may take some time (5 seconds for 10Kb on my machine), while
not having the lower-case conversion selected will insert the template
instantly.
Lower/Upper case conversion can also be invoked after tags have been entered
with the controls on the Tools page.
═══ 1.2.12. Page 14 (Register) ═══
The registration fee for the Smalled HTML Extensions is $15 (use the ORDER.SMH
file to register). You may use SMEHTM for a trial period of 40 days before
registering it. During the use of the unregistered version, every time SMEHTM
is started a dialog box will be displayed for a number of seconds to point out
that the program is shareware. After 40 days, the Link page will be locked.
To register SMEHTM you first have to produce a Personal key. This is a
numerical value derived from your name. When you enter your name in the Name
entryfield, the Personal key value should show automatically. If you've
obtained a registration key, it can be entered in the Register key entryfield.
If this key is valid, the Register button will become available. By pressing
this button, you will register. This means the nagging dialog-box at startup
will disappear and the lockup for the Link page will not happen.
Registering SMEHTM costs only $15. Check out the combined package of Smalled
and SMEHTM for only $25.
═══ 1.3. Disclaimer ═══
====DISCLAIMER====
This package is provided "as is", without any guarantees or warranties
whatsoever. Eric Slaats / Bianchi Software are not liable or responsible for
any loss or damage of any kind, including, but not limited to, losses of a
financial, physical, emotional, marital, social, or mental nature, that may
result from the use or the purported use of anything in this package, for any
purpose whatsoever.
You may distribute this shareware version of Smalled if the following
conditions are met:
1. The distributed archive must contain ONLY the files OS2_2xx.ZIP, WARP.ZIP,
SMEHTM.HLP, README.SMH, FILE_ID.DIZ, ORDER.SMH, EXAMPLE.ZIP
2. The contents of this archive are NOT MODIFIED in any way.
3. This version is not to be sold. However, a reasonable disk copying fee is
permitted.
====REGISTERING====
If you like SMEHTM and want to keep using it after the 40 day trial period, you
must register it. In the case of the Smalled HTML Extensions, this means you
must buy a registration key and enter it in the Register page. (See also the
ORDER.SMH file.)
Registering SMEHTM costs $15. (Take a look at the BMT micro
(http://www.wilmington.net/bmtmicro/) site for a combined offer of SMEHTM and
Smalled for $25.)
You may register by sending the order.sme form by mail to:
BMT Micro
PO Box 15016
Wilmington, NC 28408
U.S.A.
Bianchi Software
Tongelresestraat 61
5613 DB Eindhoven
The Netherlands
Ordering by fax or e-mail (credit card) can only be done through BMT Micro.
Enjoy and SUPPORT SHARE/FREEWARE!
For support, please do not contact BMT Micro. Contact Bianchi Software,
preferably through e-mail at (Eric.Slaats@pi.net).
═══ 1.4. What's New/History ═══
New/Changed
in SMEHTM version 1.00 June 1996
Well, all's new since this is the initial release. If you've got any wishes
just mail me. :)
═══ 1.5. Future Attractions ═══
o HTML previewer in Smalled
o Color page
o Forms page
o Counter page
o Clickable map page
o Drag and Drop for images
o Configurable floating toolbar
o DDE support
o Page order configurable
o Float properties configurable
═══ 2. Support ═══
SMEHTM is a Bianchi Software product. If you have any problems, wishes, etc.,
please contact Bianchi Software (preferably through e-mail) at:
Bianchi Software
Tongelresestraat 61
5613 DB Eindhoven
e-mail: Eric.Slaats@pi.net
═══ 2.1. About the Author ═══
If you feel the need to contact me, please send your comments, criticism,
wishes, bugs and postcards (keep 'em comin' :) ) to:
E. Slaats
Tongelresestraat 61
5613 DB Eindhoven
The Netherlands
e-mail: Eric.Slaats@pi.net
═══ 2.2. Thanks ═══
!Thanks!
I've got a number of people to thank for their help while I was building this
applet. I'm thankful it's finished (and so are my wife and kids). Thanks to:
o Paulo Mario dos S. D. de Moraes for his truly great remarks.
o Trevor Smith of Haligonian Media for putting the finishing touches on this
help file.
═══ 3. Smalled ═══
SMEHTM is built for the Smalled editor. Smalled is a high powered,
multi-threaded, 32-bit, OS/2 PM editor. It is small in size (77 Kb for Warp),
very fast and comes with lots of extras compared to the E.EXE editor. Smalled
takes full advantage of OS/2 specialties like Drag-n-Drop (fully DragText
compatible), EA's, multi-threading, ATM font support, etc. Also, from version
1.4 on, SMEHTM can be started from within Smalled and an HTML Previewer is
being built for Smalled. This means you will be able to view HTML pages from
within Smalled.
Some of the current Smalled features are:
o Full Drag-n-Drop interface for whole or selected text, meaning:
- Open
- Save
- Printing
- Shredding
- Copy
- Move
- Changing fonts
- Changing colors
- Understands the DragText rendering method, so it's fully DragText
compatible
o WYSIWYG printing
o Backup facility
o Text file settings (like fonts, etc.) are saved in the EA's, so the text is
pure ASCII
o Toolbar with bubble help
o Highly configurable (Toolbar, Drag-n-Drop, Dialogs, Default dir, etc.)
o File-find and File-history in file-dialog
o File information
o Find, replace and goto dialogs with memory
o ATM font support (also for printing)
o Line Break (formatting)
If you would like to try Smalled, look for the file Smaledxx.zip on Hobbes in
the editors directory or at the BMT Micro site
(ftp://ftp.wilmington.net/bmtmicro/smaled13.zip).
Smalled can be bought in a package deal with SMEHTM for a reduced price. Check
out the BMT Micro site at http://www.wilmington.net/bmtmicro/ for more details.
═══ ═══
If you need help polishing your documentation or if you need .INF or .HLP files
created for your applications, contact Haligonian Media at
editor@haligonian.com or (902) 461-2266.